<div class="login-form">
    <nz-spin [nzSpinning]="isSpinning" [nzTip]="'登录中...'">
        <form nz-form [formGroup]="loginForm" (ngSubmit)="submitForm($event, loginForm.value)" [nzLayout]="'horizontal'">
            <div nz-form-item nz-row>
                <div nz-form-control nz-col [nzSpan]="24" [nzHasFeedback]="'true'" [nzValidateStatus]="getFormControl('userName')">
                    <nz-input formControlName="username" [nzPlaceHolder]="'请输入用户名'" [nzSize]="'large'">
                        <ng-template #prefix>
                            <i class="anticon anticon-user"></i>
                        </ng-template>
                    </nz-input>
                </div>
                <div nz-form-explain *ngIf="getFormControl('username').dirty && getFormControl('username').hasError('required')">用户名不能为空</div>
            </div>
            <div nz-form-item nz-row>
                <div nz-form-control nz-col [nzSpan]="24" [nzHasFeedback]="'true'" [nzValidateStatus]="getFormControl('password')">
                    <nz-input formControlName="password" [nzPlaceHolder]="'密码'" [nzSize]="'large'" [nzType]="'password'">
                        <ng-template #prefix>
                            <i class="anticon anticon-lock"></i>
                        </ng-template>
                    </nz-input>
                </div>
                <div nz-form-explain *ngIf="getFormControl('password').dirty && getFormControl('password').hasError('required')">密码不能为空</div>
                <div nz-form-explain *ngIf="getFormControl('password').dirty && getFormControl('password').touched && getFormControl('password').hasError('minlength')">密码长度不能少于6位</div>
            </div>
            <div nz-form-item nz-row>
                <div nz-form-control>
                    <label nz-checkbox formControlName="remember">
                        <span>记住我</span>
                    </label>
                    <button nz-button [nzType]="'primary'" [nzSize]="'large'" [nzGhost]="true" class="login-form-button" [disabled]="!loginForm.valid">
                        <span>登录</span>
                    </button>
                </div>
            </div>
        </form>
    </nz-spin>
</div>